<template>
  <Swiper
    :modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]"
    :loop="true"
    :autoplay="{
      delay: 2000,
      disableOnInteraction: false,
    }"
    pagination
    navigation
  >
    <SwiperSlide v-for="item in carouselList" :key="item.id">
      <img :src="item.imgUrl" :alt="item.imgName" />
    </SwiperSlide>
    <!-- <SwiperSlide>
      <img src="./images/banner1.jpg" />
    </SwiperSlide>
    <SwiperSlide>
      <img src="./images/banner2.jpg" />
    </SwiperSlide>
    <SwiperSlide>
      <img src="./images/banner3.jpg" />
    </SwiperSlide>
    <SwiperSlide>
      <img src="./images/banner4.jpg" />
    </SwiperSlide> -->
  </Swiper>
</template>

<script lang="ts">
export default {
  name: "Carousel",
};
</script>

<script lang="ts" setup>
import type { CarouselList } from "~/api/home/type";

defineProps<{
  carouselList: CarouselList;
}>();
</script>

<style scoped></style>
